<template>
    <div class="zy-content">
        <div class="searchBox search-box-layout">
            <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="handleAdd">
                    新增
                </Button>
            </div>
            <div class="tableContent" :style="{ height: tableHeight + 'px' }">
                <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
                    <template slot-scope="{ row }" slot="action">
                        <span class="operationBtn" @click="handleEditRow(row)"><i
                                class="iconfont zy-common-bianji"></i>编辑</span>
                        <span class="operationBtn" @click="handleDeleteRow(row)"><i
                                class="iconfont zy-common-shanchu"></i>删除</span>
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" />
                <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"
                    @on-page-size-change="changePageSize" show-sizer />
            </div>
        </div>
        <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.sureDelete') }}</span>
            </p>
            <div slot="footer">

                <Button type="default" @click="deleteShow = false">取消</Button>
                <Button type="primary" @click="handleDeleteSure">确定</Button>
            </div>
        </Modal>


        <CreateOrUpdateModal :visible="createStatus" :form="form" :title="form.id ? '编辑' : '新增'"
            @update:visible="createStatus = $event" :handleAddSubmit="handleAddSubmit"
            :lineList="lineList"
            :statusData="statusData"
            :typeData='typeData'
            />
        <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
            @importExcelChange="importExcelChange">
        </importExcelModal>
    </div>
</template>

<script>
import ImportExcelModal from '@/components/importExcel.vue';
import {buildTree } from "@/util";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import CreateOrUpdateModal from './modal_open.vue';
import { lineAll, editBaseDataPlanApi, addBaseDataPlanApi,
     deleteBaseDataPlanApi,productBaseDataPlanApi } from '@/api/production/productionPlan'
export default {
    name: "productionPlanDetail",
    components: { ImportExcelModal, search, CreateOrUpdateModal },
    mixins: [toggleTableOperation],
    data() {
        return {
            params: {
                pageSize: 20,
                current: 1
            },
            searchData: [
                {
                    title: "计划号",
                    key: "productName",

                },



            ],
            statusData:[
                {label:'已下发',value:"1"},
                {label:'未下发',value:"0"}
            ],
            typeData:[
                {label:'销售计划',value:"1"},
                {label:'备库计划',value:"2"},
                {label:'返修计划',value:"3"}
            ],
            columns: [
               {
                    title: '工艺路线',
                    key: 'processRouteId',
                    align: 'center',

                }, {
                    title: '产品名称',
                    key: 'productId',
                    align: 'center',

                    resizable: true
                },
                {
                    title: '物料bom',
                    key: 'bomId',
                    align: 'center',

                    resizable: true
                },

                {
                    title: '计划状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        const name = this.statusData.find(i => i.value === params.row.status)
                        return h('div', name.label);
                    }
                },
                 {
                    title: '计划类型',
                    key: 'type',
                    align: 'center',
                    render: (h, params) => {
                        const name = this.typeData.find(i => i.value === params.row.type)
                        return h('div', name.label);
                    }
                },
                 {
                    title: '下发数量',
                    key: 'count',
                    align: 'center',
                },
                {
                    title: "操作",
                    slot: "action",
                    fixed: "right",
                    width: 180,
                    align: "center"
                }
            ],
            importExcelState: false,
            list: [],
            total: 0,
            deleteShow: false,
            currentItem: {},
            createStatus: false,
            form: {},
            nameList: [],
            searchParams: {},
            lineList: [],


        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 400;
        }
    },

    mounted() {
        this.getList(),
            this.relevance()
    },
    methods: {
        relevance() {
            lineAll({current:1,pageSize:100000}).then(res => {
                if (res.code === 200) {
                    console.log(buildTree(res.data.records))
                    this.lineList = res.data.records;
                }
            })
        },
        getSearch(arg) {
            this.searchParams = arg[0] || {};
            this.getList();
        },

        importExcelChange(val) {
            this.importExcelState = false;
            if (val === 'success') {
                this.$Message.success('导入成功!');
                this.changeNum();
            }
        },
        async getList() {
            try {
                const response = await productBaseDataPlanApi({ ...this.params, ...this.searchParams })
                if (response.code === 200) {
                    this.list = response.data.records;
                    this.total = response.data.total;
                } else {
                    this.$Message.warning(response.msg);
                }
            } catch (error) {


                console.error(error);
                this.$Message.error('获取列表失败');
            }
        },
        reset() {
            this.params = { pageSize: 20, current: 1 };
            this.getList();
        },
        changeNum() {
            this.params.current = 1;
            this.params.pageSize = 20;
            this.getList();
        },
        handleAdd() {
            this.form = {};
            this.createStatus = true;
        },

        handleImportData() {
            this.importExcelState = true;
        },
        handleAddSubmit() {
            const url = this.form.id ? editBaseDataPlanApi : addBaseDataPlanApi;
            const  params={
                ...this.form,
                planBeginTime:this.form.planBeginTime ? this.$moment(this.form.planBeginTime[0]).format('YYYY-MM-DD HH:mm:ss') : '',
                planEndTime:this.form.planBeginTime ? this.$moment(this.form.planBeginTime[1]).format('YYYY-MM-DD HH:mm:ss') : '',
                actualBeginTime:this.form.actualBeginTime ? this.$moment(this.form.actualBeginTime[0]).format('YYYY-MM-DD HH:mm:ss') : '',
                actualEndTime:this.form.actualBeginTime ? this.$moment(this.form.actualBeginTime[1]).format('YYYY-MM-DD HH:mm:ss') : '',

organizationId:'8328a7c5af1e4c6211b459025fcbbfa3'

            }
            console.log(params,'params')
            url(params).then(res => {
                this.$Message.success(res.message);
                this.currentItem = {};
                this.createStatus = false;
                this.getList();
            })
                .catch(error => {
                    console.error('Error submitting form:', error);

                });

        },
        handleEditRow(row) {
            this.form = { ...row ,
                planBeginTime:[row.planBeginTime,row.planEndTime],
                actualBeginTime:[row.actualBeginTime,row.actualEndTime]
            };
            console.log(this.form)
            this.createStatus = true;
        },
        handleDeleteRow(row) {
            this.currentItem = row;
            this.deleteShow = true;
        },
        handleDeleteSure() {

            deleteBaseDataPlanApi({ids:[this.currentItem.id]}).then(res => {
                if (res.code === 200) {
                    this.$Message.success(res.message);
                    this.currentItem = {};
                    this.deleteShow = false;
                    this.getList();
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        changePageNum(val) {
            this.params.current = val;
            this.getList();
        },
        changePageSize(val) {
            this.params.pageSize = val;
            this.getList();
        }
    }
}
</script>

<style scoped>
.tableContent {}
</style>
